<script setup lang="ts">
import { delArticle, getArticleChannel, getChannel } from '@/apis/stores/article'
import type { ArticleParams, ArticleRequestParams } from '@/types/user'
import { ArrowRight, Delete, EditPen } from '@element-plus/icons-vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue'

//文章状态
const ArticleStatus = ref<ArticleParams>({
  status: '',
  // 频道ID
  channel_id: undefined,
  // 开始时间(用于后端提交)
  begin_pubdate: null,
  // 截止时间(用于后端提交)
  end_pubdate: null,
  // 当前页码
  page: 1,
  // 页容量
  per_page: 10,
})

// 频道选项数组 (用于渲染)
const channelOptions = ref([
  { id: '0', name: '推荐' },
  { id: '1', name: 'html' },
])

// 时间数组(用于前端渲染)
const dateArr = ref<string[]>([])
// 监听 dateArr 的变化
watch(dateArr, (newVal) => {
  if (newVal === null) {
    ArticleStatus.value.begin_pubdate = null
    ArticleStatus.value.end_pubdate = null
  } else {
    ArticleStatus.value.begin_pubdate = newVal[0]
    ArticleStatus.value.end_pubdate = newVal[1]
  }
})

// 获取所有频道列表
const AllChannel = async () => {
  try {
    const res = await getChannel()
    console.log('channel', res.data.channels)
    // 将后台数据赋值给数组
    channelOptions.value = res.data.channels
  } catch (err) {
    console.log('错误信息：', err)
  }
}
AllChannel()

// 文章总数

const ArticleTotal = ref()

//获取文章列表返回数据
const ArticleResult = ref<ArticleRequestParams>()

// 发送请求，获取文章详情

const getArticleParams = async () => {
  const result = await getArticleChannel(ArticleStatus.value)
  // 文章总数

  // console.log('res', result.data)
  ArticleTotal.value = result.data.total_count
  // console.log('res1', result.data.results)
  ArticleResult.value = result.data || []
}
getArticleParams()

// 通过表单筛选文章
const filterArticles = () => {
  // 重置页码为1
  ArticleStatus.value.page = 1
  // 重新发送请求获取文章列表
  getArticleParams()
}

// 删除业务
// const  delArticle = ()=>{

// }
const deleteArticle = (id: string) => {
  ElMessageBox.confirm('此操作将删除该文章 是否继续?', '温馨提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(async () => {
      try {
        // 调用删除文章列表方法
        await delArticle(id)
        // 重新获取文章数据
        getArticleParams()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      } catch (error) {
        console.log('error', error)
        ElMessage({
          type: 'error',
          message: '删除文章失败',
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>
<template>
  <el-card>
    <template #header>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <div class="form">
      <el-form>
        <el-form-item label=" 状态：">
          <el-radio-group v-model="ArticleStatus.status">
            <el-radio :label="''">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <el-select
            style="width: 240px"
            v-model="ArticleStatus.channel_id"
            placeholder="请选择频道"
            clearable
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期：" style="width: 400px">
          <el-date-picker
            v-model="dateArr"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            unlink-panels
            range-separator="至"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterArticles()">筛选</el-button>
          {{ ArticleStatus }}
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <!-- 筛选结果区域 -->
  <el-card style="margin-top: 20px">
    <div>根据筛选条件共查询到 {{ ArticleTotal }} 条结果：</div>
    <!-- 表格 -->
    <el-table :data="ArticleResult?.results">
      <el-table-column label="封面">
        <template #default="scope">
          <el-image
            style="width: 150px; height: 150px"
            :src="scope.row.cover?.images?.[0]"
            :preview-src-list="scope.row.cover.images || []"
            fit="cover"
            :preview-teleported="true"
          >
            <template #error>
              <div class="image-slot">
                <el-icon><icon-picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
          <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="danger">审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="pubdate" width="200px"></el-table-column>
      <el-table-column label="阅读数" prop="read_count"></el-table-column>
      <el-table-column label="评论数" prop="comment_count"></el-table-column>
      <el-table-column label="点赞数" prop="like_count"></el-table-column>
      <el-table-column label="操作" prop="">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="EditPen"
            circle
            @click="$router.push(``)"
            plain
          ></el-button>
          <el-button
            type="danger"
            :icon="Delete"
            circle
            plain
            @click="deleteArticle(scope.row.id)"
          ></el-button>
          {{ scope.row.id }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-sizes="[2, 5, 10, 20]"
      :total="ArticleTotal"
      @size-change="getArticleParams()"
      @current-change="getArticleParams()"
      v-model:current-page="ArticleStatus.page"
      v-model:page-size="ArticleStatus.per_page"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </el-card>

  <div></div>
</template>
<style scoped>
.header {
  margin-left: 200px;
}
.form {
  margin-left: 25px;
}

.el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 180px;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: let(--el-fill-color-light);
  color: let(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
</style>
